<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>炼金台</title>
  </head>
  <body>
    <div id="app">
      <div class="search-box">
        <label for="startCity">出发城市：</label>
        <input type="text" class="city-input" placeholder="城市名" @click="enter()" v-model="searchText">
        <div v-if="newCityList.length">
          <ul @click="changecity($event)">
            <li v-for="item in newCityList" :key="item.id" :data-param="item.name">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="city-box" v-show="cityBox">
        <div class="lists">
          <button
            v-for="tab in tabs"
            v-bind:key="tab.name"
            v-bind:class="['tab-button', { active: currentTab === tab.name }]"
            v-on:click="currentTab = tab.name"
          >{{ tab.value }}</button>
          <component
            :is="currentTabComponent"
            :cityhot="cityhot"
            :citygroup="citygroup"
            @changecity="changecity"
            class="tab"
          ></component>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>
